import { IPSModelObject } from '@ibiz/dynamic-model-api';
import { Component, Host, h, ComponentInterface, Element, Prop, Method, forceUpdate } from '@stencil/core';
import { notNilEmpty } from 'qx-util';
import { IContext } from '../../core';
import { hidden, show } from '../../model-core';

/**
 * 模型预览视图
 *
 * @author chitanda
 * @date 2021-05-13 15:05:47
 * @export
 * @class IBzModelView
 * @implements {ComponentInterface}
 */
@Component({
  tag: 'ibz-model-view',
  styleUrl: 'ibz-model-view.scss',
})
export class IBzModelView implements ComponentInterface {
  @Element()
  el: HTMLIbzModelViewElement;

  @Prop()
  model: IPSModelObject;

  @Prop()
  context: IContext;

  /**
   * 是否全屏
   *
   * @author chitanda
   * @date 2021-05-13 16:05:16
   */
  fullScreen: boolean = false;

  componentDidLoad(): void {}

  connectedCallback(): void {}

  disconnectedCallback(): void {}

  /**
   * 显示模型窗口
   *
   * @author chitanda
   * @date 2021-05-13 16:05:58
   * @return {*}  {Promise<void>}
   */
  @Method()
  async present(): Promise<void> {
    show(this.el);
    forceUpdate(this);
  }

  /**
   * 关闭模型窗口
   *
   * @author chitanda
   * @date 2021-05-13 16:05:07
   * @return {*}  {Promise<void>}
   */
  @Method()
  async dismiss(): Promise<void> {
    hidden(this.el);
  }

  /**
   * 变更全屏状态
   *
   * @author chitanda
   * @date 2021-05-13 16:05:16
   * @param {boolean} [bol] 可指定显示 or 隐藏
   * @return {*}  {Promise<void>}
   */
  @Method()
  async changeFillScreen(bol?: boolean): Promise<void> {
    if (notNilEmpty(bol)) {
      this.fullScreen = bol;
    } else {
      this.fullScreen = !this.fullScreen;
    }
  }

  render() {
    return (
      <Host class='os-container os-hidden ibz-model-view' fullScreen={this.fullScreen}>
        <div class='design-container'>设计容器</div>
        <div class='ibz-model-view-wrapper'>
          <div class='ibz-model-view-header'>
            <ibz-model-view-header model={this.model} />
          </div>
          <div class='ibz-model-view-content'>
            <ibz-view-model model={this.model as any} />
          </div>
        </div>
      </Host>
    );
  }
}
